In this CSS tutorial, we will be going to learn how can we select an HTML element for styling which have a specific attribute or value.
Select HTML element with attribute [attribute]
Sometimes when we want to style an element for styling if it has a specific attribute. Then we can use the CSS attribute selector to select only those elements. For instance, we can use attribute selector when we want to provide different styling only to those <a> elements which have an attribute target.
Syntax
selector [attribute_name]
{
property:value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* Styling for <a> element with target attribute*/
a[target]
{
background-color: black;
color: white;
}
</style>
</head>
<body>
<p><a href="https://www.techgeekbuzz.com/"> TechGeekBuzz Link with no target Attribute</a></p>
<p><a href="https://www.techgeekbuzz.com/" target="_blank"> TechGeekBuzz Link with _blank target Attribute</a></p>
<p><a href="https://www.techgeekbuzz.com/" target="_self"> TechGeekBuzz Link with self target Attribute</a></p>
</body>
</html>
CSS attribute value selector [attribute_name="value"]
We can be more specific with element selection by using the attribute value selector. The attribute value selector selects that element which has a particular attribute and value. In the above example, we select those <a> elements which have target attribute but using Attribute value selector we can be more specific and select an <a> element with target attribute and _blank value.
Syntax
selector [attribute_name=value]
{
property:value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* Styling for <a> element with target attribute and _blank value*/
a[target='_blank']
{
background-color: black;
color: white;
}
</style>
</head>
<body>
<p><a href="https://www.techgeekbuzz.com/"> TechGeekBuzz Link with no target Attribute</a></p>
<p><a href="https://www.techgeekbuzz.com/" target="_blank"> TechGeekBuzz Link with _blank target Attribute</a></p>
<p><a href="https://www.techgeekbuzz.com/" target="_self"> TechGeekBuzz Link with self target Attribute</a></p>
</body>
</html>
CSS [attribute~="value"] Selector
The [attribute~=value] selector will select those elements which attribute value contain the word similar to the specified value.
Syntax
selector [attribute_name~=value]
{
property:value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* Select those p elements with atl attribute has punjab word as a value*/
p[alt~='punjab']
{
background-color: black;
color: white;
}
</style>
</head>
<body>
<p alt = 'up'>Agra</p>
<p alt = 'punjab'>Amritsar </p>
<p alt = 'punjab haryana'>Chandigarh </p>
</body>
</html>
CSS [attribute|"value"] Selector
The [attribute|value] selector will select those HTML elements which have the specified attribute and specified exact value.
Syntax
selector [attribute_name|=value]
{
property:value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* Select only those p elements which atl atttribute vlaue is punjab*/
p[alt|='punjab']
{
background-color: black;
color: white;
}
</style>
</head>
<body>
<p alt = 'up'>Agra</p>
<p alt = 'punjab'>Amritsar </p>
<p alt = 'punjab haryana'>Chandigarh </p>
</body>
</html>
CSS [attribute ^= "value"] Selector
The [attribute ^= "value"] selector will select those elements which specified attribute value start with the "value".
Syntax
selector [attribute_name^= "value"]
{
property:value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* Select only those p elements which atl atttribute vlaue start with punjab*/
p[alt^='punjab']
{
background-color: black;
color: white;
}
</style>
</head>
<body>
<p alt = 'up'>Agra</p>
<p alt = 'punjab'>Amritsar </p>
<p alt = 'punjab haryana'>Chandigarh </p>
</body>
</html>
CSS [attribute$="value"] Selector
The [attribute$="value"] selector select those HTML elements which specified attribute value end with the “value”.
Syntax
selector [attribute_name$= "value"]
{
property:value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* Select only those p elements which atl atttribute value ends with punjab*/
p[alt$='punjab']
{
background-color: black;
color: white;
}
</style>
</head>
<body>
<p alt = 'up'>Agra</p>
<p alt = 'punjab'>Amritsar </p>
<p alt = 'haryana punjab'>Chandigarh </p>
</body>
</html>
CSS [attribute*="value"] Selector
The [attribute*="value"] selector will select those HTML elements which specified attribute value contain the specified value.
Syntax
selector [attribute_name*= "value"]
{
property:value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
/* Select only those p elements which atl atttribute value contain h*/
p[alt*='h']
{
background-color: black;
color: white;
}
</style>
</head>
<body>
<p alt = 'hp'>Shimla</p>
<p alt = 'punjab'>Amritsar </p>
<p alt = 'punjab haryana'>Chandigarh </p>
</body>
</html>
Different type of Attribute Selector and Accepted patterns
| Attribute Selector | Description | Example | Accepted value Patterns | Not Accepted value Patterns |
| [attribute="value"] | It selects the specified value. | [alt='punjab'] | alt = “punjab” | alt =”punjab haryna” alt = “Punjab” |
| [attribute~="value"] | Select the element if the value contains the specified value | [alt~='punjab'] | alt = “punjab” or alt =”punjab haryna” or alt =” haryana punjab” | alt =”haryna” alt = “Punjab” |
| [attribute|="value"] | Select the element if the value is exactly the same as the specified value. | [alt|='punjab'] | Only accepted value alt = “punjab” | alt =”haryna” alt = “Punjab” etc.. |
| [attribute^="value"] | Select the elements if the value starts with the specified value. | [alt^='punjab'] | alt = “punjab” or alt =”punjab haryna” etc. | alt =”haryna” or alt = “Haryana punjab” etc.. |
| [attribute$="value"] | Select the elements if the value ends with the specified value. | [alt$='punjab'] | alt = “Haryana punjab” or alt = “punjab” | alt =”punjab haryna” etc.… |
| [attribute*="value"] | Select the elements if the value contains the specified word. | [alt*='un'] | alt=” un” or alt =”uni” or alt=”auni" etc.… | alt =”abc” or alt =”nui” etc.. |
Style Forms with [attribute] Selector
Attribute selector usually used to select the input box bases on the attribute type.
Example
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
color: red;
background-color: yellow;
}
input[type="password"] {
color: red;
}
</style>
</head>
<body>
<form name="input" action="" method="get">
Username:<input type="text" name="Name">
Password:<input type="password">
<input type="button" value="Submit">
</form>
</body>
</html>
Summary
- Attribute selector selects an element based on their attribute.
- The attribute value selector selects the element based on its attribute and value pattern.
- Forms input are generally selected using attribute value selector.